<template>
  <div class="modPage" @mouseover="showset" @mouseout="hideset" :style="{color:defaultmoddata.config.fontcolor}">
    <div class="title" v-show="defaultmoddata.config.titleshow">
      <div class="titlecon">
        <div class="title-box">{{defaultmoddata.config.title}}</div>
      </div>
    </div>
    <div class="text">
      <div id="mapBox"></div>
      <div class="textBox">
        <p>时间：{{taskdata.StartTime}} ~ {{taskdata.EndTime}}</p>
        <p>地点：{{taskdata.FullAddress}}</p>
      </div>
    </div>
    <div class="mask" v-show="maskshow">
      <div class="settingbtn" @click="headset"><i class="el-icon-setting"></i> 设置</div>
      <div class="deletebtn" @click="deletemod"><i class="el-icon-delete"></i> 删除</div>
    </div>
    <div class="bg"></div>
  </div>
</template>

<script>
  export default {
    props: ["taskdata", "moddata", "index"],
    data: function () {
      return {
        maskshow: false
      }
    },
    mounted() {
      var point;
      var map = new BMap.Map("mapBox"); // 创建地图实例 
      map.addControl(new BMap.NavigationControl());
      var p = new BMap.Point(116.404, 39.915);
      var x, y;
      var tmpArray = this.taskdata.Coordinate.split(",");
      x = parseFloat(tmpArray[0]);
      y = parseFloat(tmpArray[1]);
      if (this.taskdata.Coordinate != ",") {
        point = new BMap.Point(x, y);
        var marker = new BMap.Marker(point); // 创建标注    
        // map.panTo(point);
        map.centerAndZoom(point, 15)
        map.addOverlay(marker); // 将标注添加到地图中
      } else if (this.taskdata.FullAddress) {
        var myGeo = new BMap.Geocoder();
        myGeo.getPoint(this.taskdata.FullAddress, function (po) {
          //判断键入的地址是否存在
          if (po) {
            point = po;
          } else {
            point = p;
          }
          var marker = new BMap.Marker(point); // 创建标注    
          // map.panTo(point);
          map.centerAndZoom(point, 15)
          map.addOverlay(marker); // 将标注添加到地图中
        });
      } else {
        point = p;
        var marker = new BMap.Marker(point); // 创建标注    
        // map.panTo(point);
        map.centerAndZoom(point, 15)
        map.addOverlay(marker); // 将标注添加到地图中
      }
    },
    watch: {
      taskdata: function () {
        var point;
      var map = new BMap.Map("mapBox"); // 创建地图实例 
      map.addControl(new BMap.NavigationControl());
      var p = new BMap.Point(116.404, 39.915);
      var x, y;
      var tmpArray = this.taskdata.Coordinate.split(",");
      x = parseFloat(tmpArray[0]);
      y = parseFloat(tmpArray[1]);
      if (this.taskdata.Coordinate != ",") {
        point = new BMap.Point(x, y);
        var marker = new BMap.Marker(point); // 创建标注    
        // map.panTo(point);
        map.centerAndZoom(point, 15)
        map.addOverlay(marker); // 将标注添加到地图中
      } else if (this.taskdata.FullAddress) {
        var myGeo = new BMap.Geocoder();
        myGeo.getPoint(this.taskdata.FullAddress, function (po) {
          //判断键入的地址是否存在
          if (po) {
            point = po;
          } else {
            point = p;
          }
          var marker = new BMap.Marker(point); // 创建标注    
          // map.panTo(point);
          map.centerAndZoom(point, 15)
          map.addOverlay(marker); // 将标注添加到地图中
        });
      } else {
        point = p;
        var marker = new BMap.Marker(point); // 创建标注    
        // map.panTo(point);
        map.centerAndZoom(point, 15)
        map.addOverlay(marker); // 将标注添加到地图中
      }
      }
    },
    computed:{
      defaultmoddata(){
        if(this.moddata){
          return this.moddata
        }else{
          return {
            config:{
              fontcolor:"#000000",
              titleshow:true,
              title:"时间与地点"
            }
          }
        }
      }
    },
    methods: {
      showset: function () {
        this.maskshow = true;
      },
      hideset: function () {
        this.maskshow = false;
      },
      headset: function () {
        this.$emit('setmod', 'TimeLocation', this.index, "BasicModule")
      },
      deletemod: function () {
        this.$emit("delreq", this.index)
      }
    }
  }
</script>

<style lang="less" scoped>
  .modPage {
    position: relative;
  }

  .default {
    .title {
      display: none;
    }
    #mapBox {
      height: 10rem;
    }
    .text {
      position: relative;
    }

    .textBox {
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
      padding: .388889rem 0;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
    }

    .textBox p {
      text-align: center;
      font-size: .388889rem;
      line-height: .555556rem;
    }
  }

    #mapBox {
      height: 10rem;
    }

    .text {
      padding: .444444rem
    }

    .textBox {
      padding: .388889rem 0;
    }

    .textBox p {
      font-size: .388889rem;
      line-height: .555556rem;
    }
</style>